<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1000"></canvas>
</body>
<script>
    var oMyCanvas=document.getElementById('canvas');

    if (oMyCanvas && oMyCanvas.getContext) {
        // 转换为2D图形对象；
        var context = oMyCanvas.getContext('2d');

        if (context) {
            // 画一条横线
            context.strokeStyle = 'rgb(250,0,0)';
            context.fillStyle = 'rgb(250,255,0)';
            context.lineTo(0, 0);
            context.lineTo(100, 100);
            context.stroke();

            // 画两条横线
            context.beginPath();
            context.strokeStyle = 'rgb(250,0,0)';
            context.fillStyle = 'rgb(250,255,0)';
            context.lineTo(100, 0);
            context.lineTo(200, 100);
            context.moveTo(200, 0);
            context.lineTo(300, 100);
            context.stroke();

            // 画两条线并填充
            context.beginPath();
            context.strokeStyle = 'rgb(250,0,0)';
            context.fillStyle = 'rgb(250,255,0)';
            context.lineTo(400, 0);
            context.lineTo(300, 200);
            context.lineTo(400, 100);
            context.fill();
            context.stroke();

            // 画多条线并填充
            context.beginPath();
            context.strokeStyle = 'rgb(250,0,0)';
            context.fillStyle = 'rgb(250,255,0)';
            context.moveTo(500, 0);
            context.lineTo(600, 100);
            context.lineTo(500, 100);
            context.lineTo(450, 50);
            context.fill();
            context.stroke();

            // 画一个多边形
            context.beginPath();
            context.strokeStyle = 'rgb(250,0,0)';
            context.fillStyle = 'rgb(250,255,0)';
            context.moveTo(700, 0);
            context.lineTo(800, 100);
            context.lineTo(700, 100);
            context.lineTo(650, 50);
            context.lineTo(700, 0);
            context.fill();
            context.stroke();
        }
    }
</script>
</html>
